<template>
  <h2>options-api(选项式api)</h2>

  <h4>计数器</h4>
  <button @click="minus">-</button>
  <span>count: {{ count }}</span>
  <button @click="add">+</button>
  <div>doubleCount: {{ doubleCount }}</div>

  <hr />

  <h4>todolist</h4>
  <input type="text" v-model="textValue" />
  <button @click="submit">发布</button>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>

  <hr />

  <h4>pro列表</h4>
  <ul>
    <li v-for="item in proList" :key="item.proid">{{ item.proname }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      count: 10, // 1
      list: [
        // 2
        {
          id: 1,
          name: "zhangsan",
        },
        {
          id: 2,
          name: "lisi",
        },
      ],
      textValue: "", // 2
      proList: [], // 3
    };
  },
  mounted() {
    // 3
    fetch("http://121.89.205.189:3000/api/pro/list")
      .then((response) => response.json())
      .then((res) => {
        this.proList = res.data;
      });
  },
  computed: {
    doubleCount() {
      // 1
      return this.count * 2;
    },
  },
  methods: {
    add() {
      // 1
      this.count++;
    },
    minus() {
      // 1
      this.count--;
    },
    submit() {
      // 2
      this.list.push({
        id: new Date().getTime(),
        name: this.textValue,
      });
      this.textValue = "";
    },
    remove(id) {
      // 2
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
};
</script>
